<template>
	<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
		<el-form ref="form" :model="form" label-width="80px" :rules="rules">
			<el-form-item label="姓名" prop="name">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="籍贯" prop="location">
				<el-cascader v-model="form.location" :options="options"></el-cascader>
			</el-form-item>
			<el-form-item label="投资类型" prop="type">
				<el-select v-model="form.type" placeholder="请选择投资类型">
					<el-option label="充值" :value="0"></el-option>
					<el-option label="优惠券" :value="1"></el-option>
					<el-option label="理财服务退出" :value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="收入" prop="income">
				<el-input v-model.number="form.income"></el-input>
			</el-form-item>
			<el-form-item label="支出" prop="expend">
				<el-input v-model.number="form.expend"></el-input>
			</el-form-item>
			<el-form-item label="账户现金" prop="money">
				<el-input v-model.number="form.money"></el-input>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="submitForm('form', 0)">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
import area from "../../../assets/area.json";
import request from "../../../api/home";
export default {
	data() {
		return {
			dialogVisible: false,
			options: area,
			form: {
				name: "",
				location: [],
				type: "",
				income: "",
				expend: "",
				money: "",
			},
			rules: {
				name: [
					{ required: true, message: "请输入姓名", trigger: "blur" },
					{ min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
				],
				location: [{ required: true, message: "请选择籍贯", trigger: "change" }],
				type: [{ required: true, message: "请选择投资类型", trigger: "change" }],
				income: [{ type: "number", required: true, message: "请输入收入", trigger: "blur" }],
				expend: [{ type: "number", required: true, message: "请输入支出", trigger: "blur" }],
				money: [{ type: "number", required: true, message: "请输入账户现金", trigger: "blur" }],
			},
		};
	},
	methods: {
		handleClose(done) {
			this.$confirm("确认关闭？")
				.then((_) => {
					done();
				})
				.catch((_) => {});
		},
		onSubmit() {
			console.log("submit!");
		},
		mapLocation(locationList, area) {
			return locationList.map((el) => {
				for (let val of area) {
					if (el == val.value) {
						area = val.children;
						return val.label;
					}
				}
			});
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.form.location = this.mapLocation(this.form.location, area).join(" ");

					if (this.btnType == 0) {
						request.addHomeData(this.form).then((res) => {
							if (res.code == 200 && res.success == 0) {
								this.$parent.$refs.table.getHomeData();
								this.dialogVisible = false;
								alert("数据添加成功");
							} else {
								this.dialogVisible = false;
								alert("数据添加失败");
							}
						});
					} else {
						request.updateHomeData(this.form).then((res) => {
							if (res.code == 200 && res.success == 0) {
								this.$parent.$refs.table.getHomeData();
								this.dialogVisible = false;
								alert("数据更新成功");
							} else {
								this.dialogVisible = false;
								alert("数据更新失败");
							}
						});
					}
				} else {
					console.log("error submit!!");
					return false;
				}
			});
		},
	},
};
</script>

<style></style>
